<template>
	<view class="bg">
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="logo">重置密码</view>
		<!-- 步骤1 -->
		<block v-if="step==1">
			<view class="label">
				<text class="icon cuIcon-phone"></text>
				<input type="text" value="中国(+86)" disabled>
			</view>
			<view class="label" style="margin-top: 60rpx;">
				<text class="icon cuIcon-mobilefill"></text>
				<input type="number" v-model="phone" placeholder="输入手机号" placeholder-style="color:#cccccc">
			</view>
			<view class="label mi" style="margin-top: 60rpx;">
				<text class="icon cuIcon-pic"></text>
				<input type="text" v-model="picCode" placeholder="输入验证码" placeholder-style="color:#cccccc">
				<image :src="imgUrl" class="imgCaptcha" @click="imgCaptcha" mode="aspectFit"></image>
			</view>
			<view class="submit" @click="getCaptcha">下一步</view>
		</block>
		<!-- 步骤2 -->
		<block v-if="step==2">
			<view class="label">
				<text class="icon cuIcon-favor"></text>
				<input type="number" v-model="phoneValid" placeholder="输入手机验证码" placeholder-style="color:#cccccc">
			</view>
			<view class="label" style="margin-top: 60rpx;">
				<text class="icon cuIcon-unlock"></text>
				<input type="password" v-model="password" placeholder="输入密码" placeholder-style="color:#cccccc">
			</view>
			<view class="label" style="margin-top: 60rpx;">
				<text class="icon cuIcon-lock"></text>
				<input type="password" v-model="repassword" placeholder="再次确认密码" placeholder-style="color:#cccccc">
			</view>
			<view class="submit" @click="submit">提交</view>
		</block>
		<view class="label little">
			<text class="text-gray">已有账号</text>
			<a href="javascript:void();" class="text-orange" @click="toLogin()">去登录</a>
		</view>
	</view>
</template>

<script>
	import store from '@/common/store';
	export default {
		data() {
			return {
				step:1,
				
				phone:'',
				picCode:'',
				phoneValid:'',
				role:1,
				
				time:'',
				pt:'',
				imgUrl:'',
				
				password:'',
				repassword:'',
			}
		},
		onLoad(option) {
			this.imgCaptcha();
			this.role = option.role;
		},
		methods: {
			//图片验证码初始化
			imgCaptcha(){
				this.time = Math.round(new Date());
				const httpDomain = store.getters.GET_httpDomain;
				const baseURL = store.state.baseURL;
				this.imgUrl = httpDomain+baseURL+"/api/v1/verifyCode.jpeg?w=300&h=80&t="+this.time;
				console.log('time：'+this.time)
			},
			getCaptcha(){
				if(!this.phone){
					this.$utils.toast('手机号为空，请重新登陆');
					return
				}
				if(!this.picCode){
					this.$utils.toast('请输入图片验证码');
					return
				}
				const api = this.$request;
				this.pt = parseInt('10'+ new Date().getTime())
				api.post(api.url.sendSMS,{
					phone:this.phone,
					code:this.picCode,
					pt:this.pt,
					t:this.time
				},res=>{
					if(res.code==200){
						this.step = 2;
					}else{
						// this.imgCaptcha();
						uni.showToast({
							title:'图片验证码错误',
							icon:'error'
						})
					}
				})
			},
			submit(){
				if(!this.phoneValid){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return;
				}
				if(!this.password ||!this.repassword){
					uni.showToast({
						title:'请输入两次密码',
						icon:'none'
					})
					return;
				}
				if(this.password!=this.repassword){
					uni.showToast({
						title:'两次密码不一致',
						icon:'none'
					})
					return;
				}
				const api = this.$request;
				const _self = this;
				api.post(api.url.resetPwd,{
					phone:this.phone,
					loginPwd:this.password,
					phoneValid:this.phoneValid,
					pt:this.pt
				},res=>{
					if(res.code==200){
						uni.showModal({
							content:"密码重置成功，去登录！",
							showCancel:false,
							success() {
								uni.reLaunch({
									url:'./login?role='+_self.role
								})
							}
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
			,toLogin:function(){
				uni.reLaunch({
					 url: './login?role='+this.role
				});
			}
		}
	}
</script>

<style lang="less">
	.bg{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: white;
		position: relative;
		.logo{
			display: block;
			width: 160rpx;
			height: 160rpx;
			margin: 100rpx auto 40rpx;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 20rpx 1rpx #CCCCCC;
		}
		view.logo{
			width: 70%;
			font-size: 60rpx;
			font-weight: 600;
			color:#333333;
			box-shadow:none;
		}
		.label{
			width: 70%;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			z-index: 100;
			.icon{
				font-size: 44rpx;
				margin-right: 20rpx;
				color: #ff813b;
			}
			input{
				width: 100%;
				height: 100%;
				border-bottom: 1rpx solid #CCCCCC;
			}
			.imgCaptcha{font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
			&.mi{
				input{
					width: 50%;
				}
			}
			&.little{
				width: 60%;
				margin-top: 32rpx;
				justify-content: space-between;
				color: #ff813b;
			}
		}
		.submit{
			margin: 100rpx auto 0;
			width: 70%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius:10rpx;
			background:linear-gradient(90deg,#f4b349,#ec7136);
			color: #FFFFFF;
		}
		image.but{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 10;
		}
	}
</style>
